import { Outlet ,useNavigate} from "react-router-dom"
import { Layout ,Menu } from 'antd';
import { useState  } from 'react'

const { Header, Footer, Sider, Content } = Layout;
const QfLayout = ()=>{

    const navigate = useNavigate();

    const emnuitems = [
        {
            key:'/',
            label:'首页'
        },
        {
            key:'/list',
            label:'列表'
        },
        {
            key:'/uc',
            label:'用户中心'
        },
        {
            key: '/company',
            label:'公司管理'
        }

    ]

    const [ curMenu, setCurMenu ] = useState(['/']) 

    const handleSelect =({key})=>{
        setCurMenu([key]); //修改选择的菜单
        navigate(key,{ replace: true})
    }

    return (
        <Layout className="commonLayout">
            <Sider style={{background:'#87cefa'}}>
                <Menu 
                    style={{background:'#87cefa'}}
                    items={ emnuitems }
                    selectedKeys={curMenu}
                    onSelect={ handleSelect }
                />
            </Sider>
            <Layout>
                <Header style={{ background:'#fff' }}>Header</Header>
                <Content>
                    <Outlet />
                </Content>
                <Footer style={{ background:'#fff' }}>Footer</Footer>
            </Layout>
        </Layout>
      
    )
}

export default QfLayout;